<template>
  <div class="LoginView">
    <div class="wrap">
      <div class="close">
        <a
          href=""
          target="_blank"
          @click.prevent="$router.go(-1)"
          v-show="false"
          ><span class="iconfont icon-guanbi"></span
        ></a>
      </div>

      <div class="icon">
        <div class="img">
          <img src="../assets/img/LoginView/login-icon.png" alt="" />
        </div>
        <h4>葫芦侠</h4>
      </div>

      <form>
        <input
          type="text"
          placeholder="手机号"
          maxlength="11"
          v-model="phoneInp"
        />
        <transition name="van-fade">
          <input
            type="text"
            placeholder="验证码"
            maxlength="6"
            v-model="codeInp"
            v-show="codeFlag"
          />
        </transition>
        <div v-show="!codeFlag">
          <div :class="['phone-code', { con: phoneInp.length == 11 }]">
            <a href="" target="_blank" @click.prevent="sendVoiceCodeFun"
              >试试语言验证码</a
            >
          </div>
          <div :class="['code', { con: phoneInp.length == 11 }]">
            <a href="" target="_blank" @click.prevent="sendCodeFun"
              >发送验证码</a
            >
          </div>
          <div class="pass">
            <a
              href=""
              target="_blank"
              @click.prevent="$toast('暂未开放密码登录')"
              >使用密码登录</a
            >
          </div>
        </div>
        <div v-show="codeFlag">
          <div :class="['code', { con: codeInp.length == 6 }]">
            <a href="" target="_blank" @click.prevent="codeLoginFun"
              >验证登录</a
            >
          </div>
          <div class="pass">
            <a
              href=""
              target="_blank"
              @click.prevent="$toast('暂未开放密码登录')"
              >使用密码登录</a
            >
          </div>
        </div>
      </form>

      <div class="argument">
        <span
          @click="argumentFlag = !argumentFlag"
          :class="['iconfont', 'icon-renzheng', { con: argumentFlag }]"
        ></span>
        <p>
          已阅读并同意<a
            href=""
            target="_blank"
            @click.prevent="
              $nextTick(() => {
                servicePrivacyShow = true;
                active = 0;
              })
            "
            >葫芦侠用户及服务协议</a
          >、<a
            href=""
            target="_blank"
            @click.prevent="
              $nextTick(() => {
                servicePrivacyShow = true;
                active = 1;
              })
            "
            >隐私政策</a
          >
        </p>
      </div>

      <div class="other">
        <div class="title">
          <van-divider>试试其他登录方式</van-divider>
        </div>

        <div class="way">
          <a
            class="qq"
            href=""
            target="_blank"
            @click.prevent="$toast('请安装最新版QQ')"
          ></a>
          <a
            class="wx"
            href=""
            target="_blank"
            @click.prevent="$toast('请安装最新版微信')"
          ></a>
        </div>
      </div>
    </div>

    <van-popup v-model="servicePrivacyShow" position="top">
      <div class="service-privacy">
        <van-tabs v-model="active" type="card" animated color="#19d469">
          <van-tab title="葫芦侠用户及服务协议">
            <p>(1)该软件(_________)的著作权和所有权由_________有限公司所有。</p>
            <p>(2)该软件受_________国著作权法和国际条约条款的保护。</p>
            <p>(3)未经_________有限公司的书面许可出售租赁该程序;</p>
          </van-tab>
          <van-tab title="隐私政策">
            <p>(1)未经_________有限公司的书面许可出售租赁该程序;</p>
            <p>
              (2)将该软件和与_________没有分离授权协议的产品或山版物捆绑销售;
            </p>
            <p>
              (3)使用和拷贝没有_________授权的包含在_________之中的icons，1ogosorartwork;
            </p>
          </van-tab>
        </van-tabs>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      argumentFlag: false,
      codeFlag: false,

      phoneInp: "",
      codeInp: "",

      servicePrivacyShow: false,

      active: 0,
    };
  },
  methods: {
    // 发送验证码
    sendCodeFun() {
      if (this.phoneInp.length == 11) {
        this.codeFlag = true;
        this.$toast("发送验证码成功");
      } else {
        this.$toast("请先填写手机号码");
      }
    },

    // 发送语音验证码
    sendVoiceCodeFun() {
      if (this.phoneInp.length == 11) {
        this.codeFlag = true;
        this.$toast("发送成功 注意接听电话");
      } else {
        this.$toast("请先填写手机号码");
      }
    },

    // 验证码登录
    codeLoginFun() {
      if (this.codeInp.length == 6 && this.argumentFlag) {
        this.$toast.loading({
          message: "登录验证中...",
          forbidClick: false,
          overlay: true,
          closeOnClick: true,
          duration: 1000,
          onClose: async () => {
            let obj = {
              user_key:
                "79C01CEFACD51FFB4A622C86863C3E9D7E4BFE77FBFAD2C9B4B8F17A3ED35CFFF6AE76F07CAE7686706DD0D11037083834712141F2272A2E",
            };
            localStorage.setItem("user_key", JSON.stringify(obj));
            this.$toast.success({
              message: "登录成功",
              onClose: () => {
                this.$router.push("/HomeView");
              },
            });
          },
        });
      } else if (this.codeInp.length < 6) {
        this.$toast("验证码错误");
      } else if (!this.argumentFlag) {
        this.$toast("请先勾选协议");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.LoginView {
  min-height: 100%;
  background-color: #fff;
  .close {
    padding: 37px 41px 0 41px;
    display: flex;
    flex-direction: row-reverse;
    a {
      display: block;
      width: 15px;
      height: 15px;
      background-size: cover;
    }
  }
  .icon {
    margin-top: 71px;
    display: flex;
    padding: 0 36px;
    .img {
      width: 43px;
      height: 43px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 7px;
    }
    h4 {
      height: 43px;
      line-height: 43px;
      color: #323232;
    }
  }
  form {
    margin-top: 30px;
    padding: 0 36px;
    input {
      width: 100%;
      padding: 0;
      display: block;
      height: 45px;
      line-height: 45;
      box-sizing: border-box;
      border: 0;
      outline: none;
      font-size: 14px;
      border-bottom: 1px solid #19d469;
      color: #323232;
    }
  }
  .phone-code {
    height: 50px;
    display: flex;
    flex-direction: row-reverse;
    line-height: 50px;
    &.con {
      a {
        color: rgba(35, 199, 240, 1);
      }
    }
    a {
      display: block;
      height: 50px;
      width: max-content;
      color: rgba(35, 199, 240, 0.5);
      font-size: 12px;
    }
  }
  .code {
    margin-top: 18px;
    &.con {
      a {
        color: rgba(255, 255, 255, 1);
      }
    }
    a {
      display: block;
      height: 36px;
      line-height: 36px;
      border-radius: 18px;
      color: rgba(255, 255, 255, 0.5);
      background-color: #19d469;
      text-align: center;
      font-size: 14px;
    }
  }
  .pass {
    a {
      display: block;
      height: 40px;
      line-height: 40px;
      color: #19d469;
      text-align: center;
      font-size: 14px;
      width: max-content;
      margin: auto;
    }
  }
  .argument {
    margin-top: 85px;
    height: 42px;
    line-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    .iconfont {
      margin-right: 5px;
      &.con {
        color: #19d469;
      }
    }
    p {
      font-size: 12px;
      color: #323232;
      a {
        color: #19d469;
        text-decoration: underline;
      }
    }
  }
  .other {
    .title {
      height: 43px;
      line-height: 43px;
      padding: 0 20%;
    }
    .way {
      margin-top: 13px;
      display: flex;
      padding: 0 112px;
      max-width: 180px;
      margin: 13px auto 0;
      justify-content: space-between;
      a {
        display: block;
        width: 44px;
        height: 44px;
        background: url(../assets/img/LoginView/login-qq.png) no-repeat center;
        background-size: cover;
      }
      .wx {
        background-image: url(../assets/img/LoginView/login-wx.png);
      }
    }
  }
  .service-privacy {
    padding: 16px;

    ::v-deep .van-tabs__wrap {
      .van-tabs__nav {
        margin: 0;
      }
    }
    ::v-deep .van-tabs__content {
      padding-top: 16px;
      p {
        line-height: 25px;
        margin-top: 10px;
        &:first-child {
          margin-top: 0;
        }
      }
    }
  }
}
</style>